<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#restart{
			width: 26vw;
			height: 10vh;
			position: absolute;
			left: 50vw;
			top: 55vh;
			background: red;
			color: white;
			margin-left: -13vw;
			border-radius: 2vh;
			display: none;
		}
		#rechange{
			width: 26vw;
			height: 10vh;
			position: absolute;
			left: 50vw;
			top: 70vh;
			background: green;
			color: white;
			margin-left: -13vw;
			border-radius: 2vh;
			display: none;
		}
		#easy1{
			width: 20vw;
			height: 10vh;
			position: absolute;
			left: 50vw;
			top: 20vh;
			background: green;
			color: white;
			margin-left: -10vw;
			border-radius: 2vh;
		}
		#easy2{
			width: 20vw;
			height: 10vh;
			position: absolute;
			left: 50vw;
			top: 45vh;
			background: orange;
			color: white;
			margin-left: -10vw;
			border-radius: 2vh;
		}
		#easy3{
			width: 20vw;
			height: 10vh;
			position: absolute;
			left: 50vw;
			top: 70vh;
			background: red;
			color: white;
			margin-left: -10vw;
			border-radius: 2vh;
		}
		#score{
			width: 20vw;
			height: 3vh;
			background: wheat;
			position: absolute;
			left: 50vw;
			top: 0vh;
			color: red;
			margin-left: -10vw;
			line-height: 3vh;
			border-radius: 2vh;
			opacity: 0.4;
			display: none;
		}
		@media only screen and (min-width:900px){
			#score{
				width: 5vw;
				margin-left: -2.5vw;
			}
		}	
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var snake=new Snake();
//		snake.init();
		var easy=document.getElementsByClassName('easy');
		for(var i=0;i<easy.length;i++){
			easy[i].index=i+1;
			easy[i].onclick=function(){
				snake.easy=this.index;
				snake.init();
				easy[0].style.display='none';
				easy[1].style.display='none';
				easy[2].style.display='none';
			}
		}
		//重新开始
		var restart=document.getElementById('restart');
		restart.onclick=function(ev){
			snake.init();
			this.style.display='none';
			document.getElementById('rechange').style.display='none';
		}
		//重新选择难度
		document.getElementById('rechange').onclick=function(){
			this.style.outline='none';
			location.reload();
		}
	}
	</script>
	<body>
		<canvas id="snake" width="100%" height="100%"></canvas>
		<div id="score">分数：0</div>
		<button id="easy1" class="easy">简单</button>
		<button id="easy2" class="easy">困难</button>
		<button id="easy3" class="easy">非常困难</button>
		<button id='restart'>重新开始</button>
		<button id='rechange'>重新选择难度</button>
	</body>
</html>
